<template>
  <div class="main">
    <van-uploader class="upload" :after-read="onRead">
      <div class="item">
        <label>头像</label>
        <div class="item-right">
          <img :src="avatar" class="avatar" alt>
          <img :src="IconRight" class="right" alt>
        </div>
      </div>
    </van-uploader>
    <div class="item">
      <label>昵称</label>
      <div class="item-right" @click="handleChangeNickName">
        <span>{{nickname}}</span>
        <img :src="IconRight" class="right" alt>
      </div>
    </div>
    <div class="item">
      <label>电话</label>
      <div class="item-right">
        <span>{{phone}}</span>
      </div>
    </div>

    <div class="logout" @click="logout">
      <p>退出登录</p>
    </div>
    <div class="service">
      <p>客服电话：<a :href="'tel:' + mobile">{{mobile}}</a></p>
    </div>
  </div>
</template>

<script>
import api from "../../api";
import IconRight from "../../assets/common/icon-right.png";
export default {
  title: "个人资料",
  bodyClass: "gray-bg",
  data() {
    return {
      uid: this.$store.state.uid,
      IconRight,
      avatar: "",
      phone: "",
      nickname: "",
      mobile: 0,
    };
  },
  methods: {
    onRead(file) {
      console.log(file);
      api.usercenter.Upload(this.uid, file.content, res => {
        this.avatar = res
        this.$toast.success({
            message: `上传成功`,
            position: "middle",
          });
      });
    },
    getUserInfo() {
      api.usercenter.getUserInfo(this.uid, res => {
        this.avatar = res.info.face;
        this.nickname = res.info.nickname;
        this.phone = res.info.mobile;
      });
    },
    handleChangeNickName() {
      let encodeNick = encodeURI(this.nickname)
      this.$routerPush(this, `/pages/mine/ChangeNick?nickname=${encodeNick}`);
    },
    logout() {
      this.$dialog
        .confirm({
          title: `提示`,
          message: `是否退出登录？`
        })
        .then(() => {
          // 点击确定
          // this.$toast("退出登录...");
          let path = `/pages/login/login?logout=1`;
          wx.miniProgram.navigateTo({ url: path });
        })
        .catch(() => {
          // 点击取消
          this.$routerPush(this, `/pages/mine/Index`);
        });
    },
    getMobile() {
      api.usercenter.getMobile(res => {
        this.mobile = res.mobile
      })
    }
  },
  mounted() {
    this.getUserInfo();
    this.getMobile()
  }
};
</script>

<style lang="less" scoped>
.main {
  .upload {
    width: 100%;
  }
  .item {
    background: #fff;
    border-bottom: 1px solid #f9f9f9;
    padding: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 15vw;
    label {
      font-size: 3.5vw;
    }
    .item-right {
      font-size: 3.5vw;
      display: flex;
      align-items: center;
      .avatar {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
      }
      .right {
        width: 5vw;
        height: 5vw;
      }
    }
  }

  .logout {
    background: #fff;
    text-align: center;
    margin: 5vw 0 2vw;
    padding: 3vw;
    font-size: 3.5vw;
    color: #008fef;
  }
  .service {
    text-align: center;
    color: #999;
  }
}
</style>
